<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Youtube Player Options</title>
<script type="text/javascript" src="assets/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="assets/scripts/oauth2.js"></script>
<script type="text/javascript" src="assets/scripts/googleAuthConfig.js"></script>
<script type="text/javascript" src="assets/scripts/YoutubePlaylist.js"></script>
</head>
<body>
<div id="loading"></div>
<div id="main" style="display:none;">
  <h1 id="productTitle"></h1>
  <div id="oauth_status"></div>
  <div id="my_playlists"></div>
</div>
<script type="text/javascript">
// 因為OAuth Token效期只有一小時......
googleAuth.authorize();
// 取得token
var token = googleAuth.getAccessToken();
$(function(){
  // append i18n html
  $('#productTitle').html(chrome.i18n.getMessage("productName"));
  if (token != undefined && token !== "") {
    $("#oauth_status").html("<a href=\"#\">"+chrome.i18n.getMessage("oAuthTokenGot")+"</a>");
    var playlists = loadPlaylists(googleAuth), html = [];
    if (playlists.length != 0) {
      html.push("<select id=\"myallplaylists\">");
      for (var i in playlists) {
        html.push('<option value="'+playlists[i].apiuri+'">'+playlists[i].title+'</option>');
      }
      html.push("</select>");
      html.push('<input type="button" id="getvideos" value="播放此清單" />');
      $('#getvideos').live("click", function(){
        var url = $('#myallplaylists > option:selected').val();
        chrome.extension.getBackgroundPage().setPlaylistQueryUri(url);
      });
    } else {
      html.push("目前沒有任何播放清單");
    }
    $('#my_playlists').html(html.join(""));
  } else {
    $("#oauth_status").html("<a id=\"get_token\" href=\"#\">"+chrome.i18n.getMessage("oAuthTokenNone")+"</a>");
    $('#get_token').live("click", function(e){
      $("#oauth_status").html(chrome.i18n.getMessage("oAuthTokenGot"));
      e.preventDefault();
    });
  }
  // close loading block
  $('#loading').fadeOut();
  $('#main').fadeIn().show();
});
</script>
</body>
</html>